<template>
  <el-dialog
    v-model="isShow"
    :title="title"
    width="80%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <h3>订单编号：xxxxx <el-tag>普通</el-tag></h3>
    <row :gutter="20">
      <el-col :xs="24" :sm="4">

      </el-col>
      <el-col :xs="24" :sm="16">

      </el-col>
      <el-col :xs="24" :sm="4">

      </el-col>
    </row>
    <el-divider />
    <h6 class="mb-4">
      <b>货物列表</b>
    </h6>
    <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%"
          >
          <el-table-column label="货物编号" prop="publicName" />
          <el-table-column label="货物名称" prop="publicKey" />
          <el-table-column label="货物类型" prop="publicKey" />
          <el-table-column label="重量" prop="publicKey" />
          <el-table-column label="体积" prop="publicKey" />
          <el-table-column label="数量" prop="publicKey" />
          <el-table-column label="描述" prop="publicKey" />
    </el-table>
    <el-descriptions :column="4" class="mt-4">
      <el-descriptions-item label-align="right" label="运输方式">{{row.publicName}}</el-descriptions-item>
      <el-descriptions-item label-align="right" label="运输发票">{{row.publicKey}}</el-descriptions-item>
      <el-descriptions-item label-align="right" label="计价方式">{{row.publicValue}}</el-descriptions-item>
      <el-descriptions-item label-align="right" label="回单要求">
        <el-tag size="small">{{proxy.$util.selectName(row.status, optionData.statusType)}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="载具要求">{{row.createTime}}</el-descriptions-item>
      <el-descriptions-item label-align="right" label="货值申明">{{row.createTime}}</el-descriptions-item>
      <el-descriptions-item label-align="right" label="合理损耗">{{row.createTime}}</el-descriptions-item>
      <el-descriptions-item label-align="right" label="装运说明">{{row.createTime}}</el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <h6 class="mb-4">
      <b>结算方式：</b><el-tag>按整单</el-tag>
    </h6>
    <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%"
          >
          <el-table-column label="序号" type="index" width="80px" />
          <el-table-column label="计费科目" prop="publicName" />
          <el-table-column label="单价" prop="publicKey" />
          <el-table-column label="说明" prop="publicKey" />
    </el-table>
    <div class="mt-4">总计: ￥8888</div>
    <div class="mt-4">备注： xxx</div>
    <el-divider />
    <div><b>合同：</b><el-link type="primary">xxx</el-link></div>
    <h6 class="mt-4"><b>装车信息</b></h6>
    <div class="img-list">
      <el-image
        style="width: 100px; height: 100px;margin:10px 10px 0 0;"
        v-for="(item,index) in srcList"
        :key="index"
        :src="item"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="srcList"
        :initial-index="index"
        fit="cover"
      />
    </div>
    <h6 class="mt-4"><b>卸车信息</b></h6>
    <div class="img-list">
      <el-image
        style="width: 100px; height: 100px;margin:10px 10px 0 0;"
        v-for="(item,index) in srcList"
        :key="index"
        :src="item"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="srcList"
        :initial-index="index"
        fit="cover"
      />
    </div>
    <h6 class="mt-4"><b>验收信息</b></h6>
    <div class="img-list">
      <el-image
        style="width: 100px; height: 100px;margin:10px 10px 0 0;"
        v-for="(item,index) in srcList"
        :key="index"
        :src="item"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="srcList"
        :initial-index="index"
        fit="cover"
      />
    </div>

  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage, ElMessageBox} from 'element-plus'
import { ref, reactive, inject, getCurrentInstance, ComponentInternalInstance } from 'vue';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
let optionData:any = inject('optionData'); 
const emit = defineEmits(['confirm']);
let isShow = ref(false);
let title = ref('订单详情');
let row:any = reactive({});
const init = (data:any) => {
  row = data;
  isShow.value = true;
};
const srcList = reactive([
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]);
const tableData = reactive([{id:1}]);
const handleClose = () => {
  console.log('关闭');
};
const toSubmit = async ()=>{
  
}
defineExpose({
  init,
})
</script>

<style>

</style>